<template>
  <div>
    <el-dialog
      :before-close="cloeFn"
      :model-value="props.dialogVisible"
      title="添加用户"
    >
      <el-form :model="form" ref="ruleFormRef" :rules="rules">
        <el-form-item label="账号" prop="username">
          <el-input
            v-model="form.username"
            autocomplete="off"
            placeholder="请输入账号"
          />
        </el-form-item>
        <el-form-item label="姓名" prop="nickName">
          <el-input
            v-model="form.nickName"
            autocomplete="off"
            placeholder="请输入姓名"
          />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input
            v-model="form.email"
            autocomplete="off"
            placeholder="请输入邮箱"
          />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            v-model="form.password"
            type="password"
            placeholder="请输入密码"
          />
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            v-model="form.desc"
            autocomplete="off"
            placeholder="请输入备注"
            :rows="2"
            type="textarea"
          />
        </el-form-item>
        <el-form-item label="是否启用">
          <el-radio-group v-model="form.status">
            <el-radio :label="1" size="large">是</el-radio>
            <el-radio :label="0" size="large">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="CancelFn">取消</el-button>
          <el-button @click="ConfirmFn" type="primary"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ElMessage, ElMessageBox } from "element-plus";
import { reactive, ref, watch } from "vue";
import * as http from "@/request/http";

const props = withDefaults(
  defineProps<{
    dialogVisible: boolean;
    id: number;
  }>(),
  {
    dialogVisible: true,
    id: 0,
  }
);

//页面表单数据
const form = reactive({
  id: 0,
  username: "",
  nickName: "",
  email: "",
  password: "",
  status: 1,
  desc: "",
});

// 表单验证
const ruleFormRef = ref();

const rules = reactive({
  username: [{ required: true, trigger: "blur", message: "请输入账号" }],
  nickName: [{ required: true, trigger: "blur", message: "请输入姓名" }],
  password: [{ required: true, trigger: "blur", message: "请输入密码" }],
  email: [{ validator: checkEmail, trigger: "blur" }],
});

watch(
  () => props.id,
  () => {
    // id不为0时候，进行编辑
    if (props.id != 0) {
      http.adminInfo.getAdminInfoById(props.id).then((res) => {
        Object.assign(form, res.data);
      });
    } else {
      // 清空表单数据
      ruleFormRef.value.resetFields();
    }
  }
);

// //表单数据校验
function checkEmail(
  rule: unknown,
  value: string,
  callback: (msg?: string) => void
) {
  let reg = /^\w+[@]\w+\.\w{2,3}$/;
  if (value === "") {
    callback("请输入邮箱!");
  } else if (!reg.test(value)) {
    callback("请输入正确的邮箱地址!");
  } else {
    callback();
  }
}

const emit = defineEmits<{
  (event: "cancel"): void;
  (event: "confirm"): void;
}>();

// 取消
function CancelFn() {
  emit("cancel");
}

function addUser() {
  ElMessageBox.confirm("此操作将添加当前用户信息, 是否继续??", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      http.adminInfo.adminRegister(form).then((res) => {
        if (res.code == 200) {
          ElMessage({
            type: "success",
            message: "添加成功",
          });
          //关闭弹框
          emit("confirm");
          //清空表单数据
          ruleFormRef.value?.resetFields();
        }
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消当前操作",
      });
    });
}
function editUser() {
  ElMessageBox.confirm("此操作将添加当前用户信息, 是否继续??", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      http.adminInfo.updateAdminInfoById(form).then((res) => {
        if (res.code == 200) {
          ElMessage({
            type: "success",
            message: "修改成功",
          });
          //关闭弹框
          emit("confirm");
          //清空表单数据
          ruleFormRef.value?.resetFields();
        }
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消当前操作",
      });
    });
}

// 确认
function ConfirmFn() {
  ruleFormRef.value.validate((isValid: boolean) => {
    if (isValid) {
      console.log("验证成功");
      if (form.id == 0) {
        addUser(); //添加
      } else {
        editUser(); //修改
      }
    } else {
      console.log("验证失败");
    }
  });
}

function cloeFn() {
  emit("cancel");
}
</script>

<style scoped></style>
